<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="copyright" content="All Rights Reserved, Copyright (C) 2013, Wuyeguo, Ltd."/>
    <title>人流量监管云平台</title>
    <link rel="stylesheet" type="text/css" th:href="@{/static/jquery-easyui-1.7.0/themes/default/easyui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/jquery-easyui-1.7.0/themes/icon.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/jquery-easyui-1.7.0/demo/demo.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/wu.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/icon.css}"/>
    <script type="text/javascript" th:src="@{/static/jquery-easyui-1.7.0/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/jquery-easyui-1.7.0/jquery.easyui.min.js}"></script>

    <script type="text/javascript">
        function iframeSet(path) {
            $('iframe').attr('src', path);
        }

        function iframeHistory(n) {

            window.history.go(n);
        }

        function refresh() {
            window.location.reload();
        }

        function pageRefresh() {
            var page = $('iframe').attr('src') + '?' + Math.random(100000);
            $('iframe').attr('src', page);
        }

        function logout() {
            $.ajax({
                type: 'post',
                url: 'logout',
                async: false,
                data: {},
                success: function (result) {
                    window.location = "/login";
                }
            })
        }

    </script>
</head>
<body class="easyui-layout">
<!-- begin of header -->
<div class="wu-header" data-options="region:'north',border:false,split:true">
    <div class="wu-header-left">
        <h1>人流量监管云平台</h1>
    </div>
    <div class="wu-header-right">
        <p><strong class="easyui-tooltip" title="2条未读消息" th:text="${user.user_name}"></strong>，欢迎您！</p>
        <p><a href="#" onclick="refresh()">刷新</a>|<a href="#" onclick="iframeHistory(-1)">上一页</a>|<a href="#"
                                                                                                     onclick="pageRefresh()">页面刷新</a>|<a
                href="#">安全退出</a></p>
    </div>
</div>
<!-- end of header -->
<!-- begin of sidebar -->
<div class="wu-sidebar" data-options="region:'west',split:true,border:true,title:'导航菜单'">
    <div class="easyui-accordion" data-options="border:false,fit:true">
        <div title="快捷菜单" data-options="iconCls:'icon-application-cascade'" style="padding:5px;">
            <ul class="easyui-tree wu-side-tree">
                <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation"
                                                         onclick="iframeSet('/user/list')">用户列表</a></li>
            </ul>
        </div>
        <div title="摄像头管理" data-options="iconCls:'icon-application-form-edit'" style="padding:5px;">
            <ul class="easyui-tree wu-side-tree">
                <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation"
                                                         onclick="iframeSet('/camera/cameraLocation')">摄像头地图</a></li>
                <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users"
                                            onclick="iframeSet('/camera/allList')">摄像头信息</a></li>
            </ul>
        </div>
        <div title="人群识别" data-options="iconCls:'icon-creditcards'" style="padding:5px;">
            <ul class="easyui-tree wu-side-tree">
                <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation"
                                                         onclick="iframeSet('/CameraPeople/CameraRealTime')">实时人群</a>
                </li>
                <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users"
                                            onclick="iframeSet('/CameraPeople/CameraPeopleData')">所有摄像头人群数据</a></li>
                <li iconCls="icon-user-group"><a href="javascript:void(0)"
                                                 onclick="iframeSet('/CameraPeople/CameraPhotoAll')">实时图像</a></li>

            </ul>
        </div>
        <!--        <div title="订单管理" data-options="iconCls:'icon-cart'" style="padding:5px;">-->
        <!--            <ul class="easyui-tree wu-side-tree">-->
        <!--                <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation"-->
        <!--                                                         data-link="layout-3.html"-->
        <!--                                                         iframe="0">导航标题</a></li>-->
        <!--                <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users"-->
        <!--                                            data-link="temp/layout-3.html"-->
        <!--                                            iframe="0">导航标题</a></li>-->
        <!--                <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group"-->
        <!--                                                 data-link="temp/layout-3.html"-->
        <!--                                                 iframe="0">导航标题</a></li>-->
        <!--                <li iconCls="icon-book"><a href="javascript:void(0)" data-icon="icon-book"-->
        <!--                                           data-link="temp/layout-3.html" iframe="0">导航标题</a></li>-->
        <!--                <li iconCls="icon-cog"><a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html"-->
        <!--                                          iframe="0">导航标题</a></li>-->
        <!--                <li iconCls="icon-application-osx-error"><a href="javascript:void(0)"-->
        <!--                                                            data-icon="icon-application-osx-error"-->
        <!--                                                            data-link="temp/layout-3.html" iframe="0">导航标题</a></li>-->
        <!--            </ul>-->
        <!--        </div>-->
        <!--        <div title="广告管理" data-options="iconCls:'icon-bricks'" style="padding:5px;">-->
        <!--            <ul class="easyui-tree wu-side-tree">-->
        <!--                <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation"-->
        <!--                                                         data-link="layout-3.html"-->
        <!--                                                         iframe="0">导航标题</a></li>-->
        <!--                <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users"-->
        <!--                                            data-link="temp/layout-3.html"-->
        <!--                                            iframe="0">导航标题</a></li>-->
        <!--                <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group"-->
        <!--                                                 data-link="temp/layout-3.html"-->
        <!--                                                 iframe="0">导航标题</a></li>-->
        <!--                <li iconCls="icon-book"><a href="javascript:void(0)" data-icon="icon-book"-->
        <!--                                           data-link="temp/layout-3.html" iframe="0">导航标题</a></li>-->
        <!--                <li iconCls="icon-cog"><a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html"-->
        <!--                                          iframe="0">导航标题</a></li>-->
        <!--                <li iconCls="icon-application-osx-error"><a href="javascript:void(0)"-->
        <!--                                                            data-icon="icon-application-osx-error"-->
        <!--                                                            data-link="temp/layout-3.html" iframe="0">导航标题</a></li>-->
        <!--            </ul>-->
        <!--        </div>-->
        <!--        <div title="报表中心" data-options="iconCls:'icon-chart-curve'" style="padding:5px;">-->
        <!--            <ul class="easyui-tree wu-side-tree">-->
        <!--                <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation"-->
        <!--                                                         data-link="layout-3.html"-->
        <!--                                                         iframe="0">导航标题</a></li>-->
        <!--                <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users"-->
        <!--                                            data-link="temp/layout-3.html"-->
        <!--                                            iframe="0">导航标题</a></li>-->
        <!--                <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group"-->
        <!--                                                 data-link="temp/layout-3.html"-->
        <!--                                                 iframe="0">导航标题</a></li>-->
        <!--                <li iconCls="icon-book"><a href="javascript:void(0)" data-icon="icon-book"-->
        <!--                                           data-link="temp/layout-3.html" iframe="0">导航标题</a></li>-->
        <!--                <li iconCls="icon-cog"><a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html"-->
        <!--                                          iframe="0">导航标题</a></li>-->
        <!--                <li iconCls="icon-application-osx-error"><a href="javascript:void(0)"-->
        <!--                                                            data-icon="icon-application-osx-error"-->
        <!--                                                            data-link="temp/layout-3.html" iframe="0">导航标题</a></li>-->
        <!--            </ul>-->
        <!--        </div>-->
        <!--        <div title="系统设置" data-options="iconCls:'icon-wrench'" style="padding:5px;">-->
        <!--            <ul class="easyui-tree wu-side-tree">-->
        <!--                <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation"-->
        <!--                                                         data-link="layout-3.html"-->
        <!--                                                         iframe="0">导航标题</a></li>-->
        <!--                <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users"-->
        <!--                                            data-link="temp/layout-3.html"-->
        <!--                                            iframe="0">导航标题</a></li>-->
        <!--                <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group"-->
        <!--                                                 data-link="temp/layout-3.html"-->
        <!--                                                 iframe="0">导航标题</a></li>-->
        <!--                <li iconCls="icon-book"><a href="javascript:void(0)" data-icon="icon-book"-->
        <!--                                           data-link="temp/layout-3.html" iframe="0">导航标题</a></li>-->
        <!--                <li iconCls="icon-cog"><a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html"-->
        <!--                                          iframe="0">导航标题</a></li>-->
        <!--                <li iconCls="icon-application-osx-error"><a href="javascript:void(0)"-->
        <!--                                                            data-icon="icon-application-osx-error"-->
        <!--                                                            data-link="temp/layout-3.html" iframe="0">导航标题</a></li>-->
        <!--            </ul>-->
        <!--        </div>-->
    </div>
</div>
<!-- begin of main -->
<div class="wu-main" data-options="region:'center'">
    <!--    <div id="wu-tabs" class="easyui-tabs" data-options="border:false,fit:true">-->
    <!--&lt;!&ndash;        <div title="首页" data-options="href:'temp/layout-1.html',closable:false,iconCls:'icon-tip',cls:'pd3'"></div>&ndash;&gt;-->
    <!--        首页-->
    <!--    </div>-->
    <iframe src="/camera/cameraLocation" frameborder="0" width="100%" height="100%"></iframe>
</div>
<!-- end of main -->
<div class="wu-footer" data-options="region:'south',border:true,split:true">
    &copy; 2013 weiyang_tang All Rights Reserved
</div>
<!-- end of footer -->
<script type="text/javascript">
    $(function () {
        $('.wu-side-tree a').bind("click", function () {
            var title = $(this).text();
            var url = $(this).attr('data-link');
            var iconCls = $(this).attr('data-icon');
            var iframe = $(this).attr('iframe') == 1 ? true : false;
            addTab(title, url, iconCls, iframe);
        });
    })

    /**
     * Name 载入树形菜单
     */
    $('#wu-side-tree').tree({
        url: 'temp/menu.php',
        cache: false,
        onClick: function (node) {
            var url = node.attributes['url'];
            if (url == null || url == "") {
                return false;
            } else {
                addTab(node.text, url, '', node.attributes['iframe']);
            }
        }
    });

    /**
     * Name 选项卡初始化
     */
    $('#wu-tabs').tabs({
        tools: [{
            iconCls: 'icon-reload',
            border: false,
            handler: function () {
                $('#wu-datagrid').datagrid('reload');
            }
        }]
    });

    /**
     * Name 添加菜单选项
     * Param title 名称
     * Param href 链接
     * Param iconCls 图标样式
     * Param iframe 链接跳转方式（true为iframe，false为href）
     */
    function addTab(title, href, iconCls, iframe) {
        var tabPanel = $('#wu-tabs');
        if (!tabPanel.tabs('exists', title)) {
            var content = '<iframe scrolling="auto" frameborder="0"  src="' + href +
                '" style="width:100%;height:100%;"></iframe>';
            if (iframe) {
                tabPanel.tabs('add', {
                    title: title,
                    content: content,
                    iconCls: iconCls,
                    fit: true,
                    cls: 'pd3',
                    closable: true
                });
            } else {
                tabPanel.tabs('add', {
                    title: title,
                    href: href,
                    iconCls: iconCls,
                    fit: true,
                    cls: 'pd3',
                    closable: true
                });
            }
        } else {
            tabPanel.tabs('select', title);
        }
    }

    /**
     * Name 移除菜单选项
     */
    function removeTab() {
        var tabPanel = $('#wu-tabs');
        var tab = tabPanel.tabs('getSelected');
        if (tab) {
            var index = tabPanel.tabs('getTabIndex', tab);
            tabPanel.tabs('close', index);
        }
    }
</script>
</body>
</html>
